/**
 * 家庭管理页面
 * 展示家庭成员列表，支持添加和查看详情
 * 
 * 功能说明：
 * - 显示所有家庭成员的基本信息
 * - 支持点击成员卡片查看详情
 * - 提供添加新成员的功能入口
 * - 使用骨架屏优化加载体验
 * 
 * @author 项目开发团队
 * @version 1.0.0
 */

import React, { useEffect, useState } from 'react'
import { Button, Card, Skeleton } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import TopNavbar from '../../components/TopNavbar'
import styles from './index.module.css'
import { fetchFamilyList } from '../../services/familyService'

/**
 * 家庭管理页面组件
 * @returns {JSX.Element} 家庭管理页面
 */
const Family = () => {
  const navigate = useNavigate()           // 路由导航函数
  const [loading, setLoading] = useState(true)  // 加载状态
  const [list, setList] = useState([])     // 家庭成员列表

  /**
   * 组件挂载时获取家庭成员列表
   * 使用useEffect确保在组件渲染后执行数据获取
   */
  useEffect(() => {
    fetchFamilyList()
      .then(setList)                       // 成功时更新列表
      .finally(() => setLoading(false))    // 无论成功失败都停止加载
  }, [])

  /**
   * 处理添加成员按钮点击
   * 导航到添加成员页面
   */
  const handleAddMember = () => {
    navigate('/family/add')
  }

  /**
   * 处理成员卡片点击
   * 导航到成员详情页面
   * @param {string} memberId - 成员ID
   */
  const handleMemberClick = (memberId) => {
    navigate(`/family/detail/${memberId}`)
  }

  return (
    <div className={styles.page}>
      {/* 顶部导航栏 */}
      <TopNavbar title="家庭管理" showBack onBack={() => navigate(-1)} />
      
      <div className={styles.container}>
        {loading ? (
          /* 加载状态 - 显示骨架屏 */
          <Skeleton.Paragraph animated lineCount={3} />
        ) : (
          <>
            {/* 家庭成员列表 */}
            {list.map(member => (
              <Card 
                key={member.id} 
                className={styles.card}
                onClick={() => handleMemberClick(member.id)}
              >
                <div className={styles.row}>
                  <div className={styles.name}>
                    {member.name}（{member.relation}）
                  </div>
                  <div className={styles.qr}>🧾</div>
                </div>
                <div className={styles.reg}>登记号：{member.regNo}</div>
              </Card>
            ))}
            
            {/* 添加成员按钮 */}
            <Button block color='primary' onClick={handleAddMember}>
              添 加
            </Button>
          </>
        )}
      </div>
    </div>
  )
}

export default Family


